<template>
  <div class="container flexAuto">
    <a class="logo" href="#">
      <img src="@/assets/img/logo.png" alt="">
      G宠街商家管理
    </a>

    <div class="flexAuto1">
      <nav>
        <router-link v-for="item in topNav" :to="{name: item.name}" :key="item.id" @click.native="sideNav(item)">{{item.meta.title}}</router-link>
      </nav>
    </div>

    <div class="rightC">
      <router-link to="" style="color:#434343">消息中心</router-link>
      <div class="hover iconfont"
           @mouseover="mouseover"
           @mouseleave="mouseleave"
      >
        皇家官方旗舰店
        <b v-show="X">&#xe62d;</b>
        <b v-show="!X">&#xe62f;</b>
        <div class="loginBox transition">
          <router-link to="/login" class="loginOut" @click.native="loginOut">退出</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mainHeader',
  data () {
    return {
      X: true,
      topNav: null
    }
  },
  mounted () {
    this.topNav = this.$router.options.routes[1].children
  },
  methods: {
    mouseover () {
      this.X = false
    },
    mouseleave () {
      this.X = true
    },
    sideNav (item) {
      // console.log(item)
      // // this.$store.commit('beardCrumbFnT', item.meta.title)
      // // this.$store.commit('beardCrumbFnB', '<a>' + item.children[0].meta.title + '</a>')
      this.$store.commit('sideNavFn', item.children)
      console.log(this.$store.state.sideNav)
    },
    loginOut () {
      this.$cookie.delete('token')
    }
  }
}
</script>

<style scoped lang="less">
  .container{
    min-width: 800px;
    .logo{
      display: block;
      width:300px;
      background: #1f2327;
      text-align: center;
      color:#fff;
      font-size:20px;

      img{
        width:30px;
        margin-right:20px;
      }
    }
    .flexAuto1{
      padding-left:80px;
      font-size:16px;
      height:80px;
      float:left;
      overflow-x: auto;
      overflow-y: hidden;

      nav{
        min-width:332px;
        height:80px;
        a{
          padding-right:70px;
        }
        a:last-child{
          padding-right:0;
        }
      }
    }
    .rightC{
      min-width:240px;
      padding-right:80px;
      padding-left:20px;
      float:right;
      div.hover{
        display:inline-block;
        margin-left:35px;
        position: relative;
        div{
          top:60px;
          line-height:30px;
          position: absolute;
          background: #d2f3ff;
          width:100%;
          overflow: hidden;
          height:0;
          a{
            line-height:30px;
            display: block;
          }
        }
      }
      div.hover:hover div.loginBox{
        height:30px;
      }
    }
  }
</style>
